import {Component, OnInit, ElementRef} from '@angular/core';
import {HighlightUtils} from "great-jsutils";
import {HighlightJsService} from "angular2-highlight-js";

@Component({
  selector: 'app-tool02',
  templateUrl: './tool02.component.html',
  styleUrls: ['./tool02.component.less']
})
export class Tool02Component implements OnInit {
  htmlStr = `
  <div>
    <p>123</p>
    <p>234</p>
    <label>22222</label>
  </div>
  `;
  formatHtml;
  escapeHtml;
  escapeHtml2 = [];

  constructor(private el: ElementRef, private highlightJsService: HighlightJsService) {
  }

  ngOnInit() {
    this.output();
  }

  output() {
    this.escapeHtml = HighlightUtils.escapeHtml(this.htmlStr);
    this.formatHtml = HighlightUtils.formatHtml(this.htmlStr);
    this.escapeHtml2 = [];
    this.formatHtml.forEach(data => {
      this.escapeHtml2.push({space: data.space, html: HighlightUtils.escapeHtml(data.html)});
    });
    this.hljsDemo();
  }

  hljsDemo() {
    setTimeout(()=>{
      this.highlightJsService.highlight(this.el.nativeElement.querySelector('.html'));
    },300);
  }

}
